<template>
  <div>
    <!-- 顶部标题 -->
    <div class="top">
      <span class="top-text"> 代付统计 </span>
    </div>
    <!-- 主体内容 -->
    <div class="nav">
      <div v-for="item in goods" :key="item.id" class="nav-box">
        <div class="nav-top">
          <span class="nav-text">{{ item.name }}</span>
          <span class="nav-icon">元</span>
        </div>
        <span class="nav-price">{{ item.prce }}</span>
      </div>
    </div>

    <div>
      <!-- 折线图 -->
   <div class="bgg">
        <div class="vol-data">
        <div class="charts charts-box">
          <div class="charts-title">代付可用金额：</div>
          <div id="myChart" class="charts-line"></div>
        </div>
      </div>
   </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          name: "商户总余额",
          prce: 5002,
        },
        {
          id: 2,
          name: "商户总余额",
          prce: 50230,
        },
        {
          id: 3,
          name: "商户总余额",
          prce: 502310,
        },
        {
          id: 4,
          name: "商户总余额",
          prce: 504420,
        },
        {
          id: 5,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 6,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 7,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 8,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 9,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 10,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 11,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 12,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 13,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 14,
          name: "商户总余额",
          prce: 50550,
        },
        {
          id: 15,
          name: "商户总余额",
          prce: 50550,
        },
      ],
    };
  },
  mounted() {
    /*初始化ECharts图表，绑定到id=myChart的div上面*/
    var myChart = this.$echarts.init(document.getElementById("myChart"));
    myChart.setOption({
      xAxis: {
        type: "category",
        data: ["商户总余额", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [1, 3, 4, 7, 4, 6, 9, 0, 5, 6],
          type: "line",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
    });
  },
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
// 顶部标题
.top {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
}
.top-text {
  padding-bottom: 17.2px;
  border-bottom: 2px solid #009688;
  color: #009688;
}
// 主体内容
.nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.nav-box {
  width: 300px;
  height: 130px;
  background: white;
  margin: 15px;
}
.nav-top {
  padding: 10px 15px;
  border-bottom: 1px solid #d1d1d1;
  display: flex;
  justify-content: space-between;
}
.nav-text {
  font-size: 16px;
}
.nav-icon {
  padding: 3px 4px;
  background: black;
  color: white;
  font-size: 12px;
}
.nav-price {
  font-size: 36px;
  padding: 15px 15px;
  color: #666666;
  line-height: 80px;
}

// 折线图
.charts-box {
  width: 100%;
  height: 6.54rem;
}
.charts-line {
  width: 100%;
  height: 300px;
}
.bgg{
  background-color: white;
}
</style>